<template>
    <div>
        <mt-header title="查询玩家充值记录">
            <router-link to="/homes" slot="left">
                <i class="mintui mintui-back lic-d"></i>
            </router-link>
        </mt-header>
        <div class="data">
            <input type="text"  v-model="year"><span>-</span>
            <input type="text"  class="data-d" v-model="month"><span>-</span>
            <input type="text"  class="data-d"  v-model="day"><span class="moc">至</span>
            <input type="text"  v-model="year2"><span>-</span>
            <input type="text"  class="data-d"  v-model="month2"><span>-</span>
            <input type="text"  class="data-d"  v-model="day2">
        </div>
        <div class="boc">
            <button class="bt" @touchend="getselectuserItem"><img src="../../assets/image/sou.png" alt="" >查询</button>
            <div class="tea">
                 <div class="myhigth">

                 </div>

              
        
         <div class="list" v-for="(item,i) in selesData" :key="i">
            <div class="left">
                <p class="ck">代理ID：<span>{{item.agentID}}</span></p>
                <p class="ck">代理名称：<span>{{item.agentName}}</span></p>
            </div>
            <div class="right">
                <p>获得房卡：<span>{{item.gems}}</span></p>
            </div>
             
             <div class="dingwe"  @click="agentdetails(item.userId)">
                <img src="../../assets//image/tiaozhuan.png" alt="">
            </div>

        </div>

               <div class="one">
                  <div @touchend='pagingreduce' class="shang">上一页</div>
                  <div @touchend='pagingplus' class="xia">下一页</div>
             </div>  

            </div>
        </div>
    </div>
</template>

<script>
import {userselectuserItem} from '../../api/api'
import { Toast } from 'mint-ui';
export default {
    data(){
        return{
            year:'',
            month:'',
            day:'',
            year2:'',
            month2:'',
            day2:'',
            pang:'1',
            selesData:[],
            length:''
        }
    },
    created(){
        this.getData()
    },
    methods:{
        getselectuserItem(){ 
          let selesdata = {
              statDate: `${this.year}-${this.month}-${this.day}`,
              endDate:  `${this.year2}-${this.month2}-${this.day2}`,
              pageNo:this.pang,
              pageSize:5
          }    
            userselectuserItem(selesdata).then(res =>{
                if(res.data.code == 0){
                    this.selesData = res.data.data;
                    this.length = res.data.totalpage;
                }else {
                    Toast("查询没有记录");
                }
            })
        },
        getData(){
          var time = new Date();
          this.year = time.getFullYear();
          this.month = time.getMonth() + 1;
          this.day = time.getDate();
          this.year2 = time.getFullYear();
          this.month2 = time.getMonth() + 1;
          this.day2 = time.getDate();
       },
          pagingplus(){
             if(this.pang < this.length){
                   this.pang ++;
                 this.getselectuserItem()
             }else {
                 Toast('已经是最后一页了');
             }  
         },
         pagingreduce(){
             if(this.pang > 1){
              this.pang --;
              this.getselectuserItem()
             } else {
                 Toast('已经是第一页了');
             }  
         },
         agentdetails(ids){
             this.$router.push('/downRecord/' + ids)
         }
    }
}
</script>

<style lang="less" scoped>

a {
  text-decoration: none;
}
.lic-d {
  font-size: 50px;
}
.mint-header {
  background: -webkit-linear-gradient(left, #6180f4, #79cbfa);
  font-size: 36px;
  height: 80px;
}
.data {
  height: 80px;
  text-align: center;
  vertical-align: middel;
  padding-top: 20px;
  span {
    font-size: 24px;
    text-align: center;
    font-weight: 700;
  }
  .moc {
    display: inline-block;
    margin: 8px;
    font-size: 30px;
  }
}
input {
  width: 12%;
  height: 60px;
  border-radius: 10px;
  background-color: #f3f3f3;
  outline: 0;
  border: 0;
  text-align: center;
  border: 2px solid #cccccc;
}
.boc {
  text-align: center;
  .bt {
    background-color: #f3f3f3;
    vertical-align: middle;
    font-size: 35px;
    width: 22%;
    height: 60px;
    margin-top: 40px;
    outline: 0;
    border: 0;
    border-radius: 10px;
    border: 2px solid #ddd;
    cursor: pointer;
  }
  .bt:hover {
    background-color: #050505;
    color: #ffffff;
  }
  img {
    display: inline-block;
    width: 40px;
    margin-right: 10px;
  }
  .tea {
    height: 900px;
    margin: 0 10px;
    background-color: #afafaf;
    margin-top: 20px;
    .cki {
      font-size: 50px;
      padding-top: 150px;
      font-weight: 700;
    }
    .myhigth {
      height: 10px;
    }
  }
  .list {
    height: 108px;
    border: 2px solid #cccccc;
    margin: 10px 10px 0;
    color: #949494;
    border-radius: 10px;
    background-color: #fff;
    position: relative;
    border: 2px solid #cccccc;
    p {
      margin: 0;
      padding: 0;
      font-size: 28px;
    }
    .left {
      float: left;
      padding-left: 10px;
      margin-top: 10px;
      font-size: 24px;
      .ck {
        text-align: left;
      }
      p {
        margin-bottom: 10px;
      }
    }
    .right {
      float: right;
      padding-right: 100px;
      margin-top: 10px;
    }
    .dingwe {
      width: 80px;
      height: 80px;
      position: absolute;
      right: 4px;
      top: 15px;
    }
  }
}
.one {
  height: 60px;
  margin: 10px 10px 0;
  text-align: center;
  line-height: 60px;
  font-size: 26px;
  margin-top: 10px;
  margin-bottom: 0;
}
.shang {
  width: 320px;
  float: left;
  border: 2px solid #cccccc;
  border-radius: 25px;
  background-color: #dee0e0;
  font-size: 28px;
}
.shang:hover {
  background-color: #050505;
  color: #ffffff;
}
.xia {
  width: 320px;
  float: right;
  border-radius: 25px;
  border: 2px solid #cccccc;
  background-color: #dee0e0;
  font-size: 28px;
}
.xia:hover {
  background-color: #050505;
  color: #ffffff;
}
input::-webkit-input-placeholder {
  font-size: 36px;
  color: #ccc;
  line-height:28px ;
}
</style>
